<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

// 随机积极向上的句子
const positiveQuotes = [
  '每天进步一点点',
  '坚持就是胜利',
  '相信自己，你能行',
  '学习永无止境',
  '努力创造未来',
  '编程改变世界',
  '细节决定成败',
  '创新源于实践'
]

// 打字机效果相关
const displayText = ref('')
const currentQuote = ref('')
const typingIndex = ref(0)
const isDeleting = ref(false)
const typingSpeed = ref(100)
let typingInterval = null

// 随机选择一条句子
const selectRandomQuote = () => {
  const randomIndex = Math.floor(Math.random() * positiveQuotes.length)
  currentQuote.value = positiveQuotes[randomIndex]
}

// 打字机效果
const typeWriter = () => {
  // 打字阶段
  if (!isDeleting.value && typingIndex.value < currentQuote.value.length) {
    displayText.value += currentQuote.value.charAt(typingIndex.value)
    typingIndex.value++
    typingSpeed.value = 150
  }
  // 删除阶段
  else if (isDeleting.value && typingIndex.value > 0) {
    displayText.value = currentQuote.value.substring(0, typingIndex.value - 1)
    typingIndex.value--
    typingSpeed.value = 150
  }
  // 切换阶段
  else {
    isDeleting.value = !isDeleting.value
    if (!isDeleting.value) {
      // 当完成删除后，选择新的句子
      selectRandomQuote()
      typingSpeed.value = 1000 // 切换句子前的停顿时间
    } else {
      // 当完成打字后，停顿2秒再开始删除
      typingSpeed.value = 2000
    }
  }
  // 清除旧的定时器并创建新的，以响应速度变化
  clearInterval(typingInterval)
  typingInterval = setInterval(typeWriter, typingSpeed.value)
}

// 导航到作品页面
const goToWorks = () => {
  router.push('/works')
}

// 导航到联系页面
const goToContact = () => {
  router.push('/contact')
}

// 组件挂载时初始化
onMounted(() => {
  selectRandomQuote()
  setTimeout(() => {
    typingInterval = setInterval(typeWriter, typingSpeed.value)
  }, 900)
})

// 组件卸载时清理定时器
onUnmounted(() => {
  if (typingInterval) {
    clearInterval(typingInterval)
  }
})
</script>

<template>
  <div class="home-container">
    <main class="home-content">
      <div class="intro-section">
        <h1 class="main-title">你好，我是 <span
            class="highlight-name">Demoncode_y</span>
        </h1>
        <p class="beginner-text">前端新手小白一枚~</p>
        <p class="typing-text accent-text">{{ displayText }}<span
            class="cursor">|</span>
        </p>
        <div class="action-buttons">
          <el-button
            class="btn-custom-primary"
            @click="goToWorks"
          >查看作品</el-button>
          <el-button
            class="btn-custom-secondary"
            @click="goToContact"
          >联系我</el-button>
        </div>
      </div>
      <!-- 页脚装饰 -->
      <div class="footer-decoration">
        <div class="decoration-line"></div>
        <div class="decoration-dot"></div>
        <div class="decoration-line"></div>
      </div>
    </main>
  </div>
</template>

<style scoped>
.home-container {
  min-height: 100vh;
  background-color: var(--bg-color);
  color: var(--text-color);
}

.home-content {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.intro-section {
  text-align: center;
  max-width: 800px;
  padding: 2rem;
}

.main-title {
  font-size: 3.5rem;
  margin-bottom: 0.5rem;
  background: linear-gradient(90deg, var(--primary-color), #667eea, #764ba2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% auto;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease 0.3s forwards;
}

.highlight-name {
  background: linear-gradient(90deg, #409eff, #9013fe, #409eff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 300% 100%;
  animation: gradient-animation 8s ease infinite;
  font-weight: bold;
}

/* 定义渐变动画 */
@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.beginner-text {
  font-size: 1.2rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease 0.3s forwards;
}

.typing-text {
  font-size: 1.8rem;
  margin-bottom: 2rem;
  min-height: 2rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease 0.3s forwards;
}

.accent-text {
  background: linear-gradient(45deg, #f38f6b, #f8c06c);
  background-clip: text;
  color: transparent;
}

.cursor {
  animation: blink 1s infinite;
  color: #ff9873;
  font-weight: bold;
}

@keyframes blink {

  0%,
  50% {
    opacity: 1;
  }

  51%,
  100% {
    opacity: 0;
  }
}

.action-buttons {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  margin-top: 2rem;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease 0.3s forwards;
}

/* 自定义主按钮样式 */
.btn-custom-primary {
  height: 40px;
  background: var(--primary-color);
  border: none;
  border-radius: 30px;
  padding: 0.8rem 2rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn-custom-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(95, 168, 252, 0.4);
}

.btn-custom-primary:active {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(95, 168, 252, 0.3);
}

/* 自定义次要按钮样式 */
.btn-custom-secondary {
  height: 40px;
  background: transparent;
  border: 2px solid var(--primary-color);
  border-radius: 30px;
  padding: 0.8rem 2rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary-color);
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-custom-secondary:hover {
  background-color: rgba(95, 168, 252, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(95, 168, 252, 0.2);
}

.btn-custom-secondary:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(95, 168, 252, 0.2);
}

/* 页脚装饰 */
.footer-decoration {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  opacity: 0;
  animation: fadeIn 1s ease 0.5s forwards;
}

.decoration-line {
  height: 1px;
  width: 40px;
  background-color: var(--border-color);
}

.decoration-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--primary-color);
  margin: 0 8px;
}

/* 动画定义 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-title {
    font-size: 2.5rem;
  }

  .typing-text {
    font-size: 1.2rem;
  }

  .action-buttons {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
  }

  .btn-custom-primary,
  .btn-custom-secondary {
    width: 200px;
    height: 50px;
    /* 固定高度确保两个按钮高度一致 */
    margin: 0 auto;
    /* 确保在容器中水平居中 */
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
